<template>
	<div class="page">
		<!-- <u-navbar>
			<view class="slot-wrap">
				<u-search placeholder="商品名称" v-model="searchForm.goodsName" @search="load" @custom="load"></u-search>
			</view>
		</u-navbar> -->

		<!-- 商品列表 -->
		<div class="global-list" v-if="goodsTemplates.length">
			<div class="global-item" @click="confirm(item)" v-for="(item,index) in goodsTemplates" :key="index">
				<!-- 订单来源，订单号，订单状态 -->
				<div class="flex global-top-col">
					<div class="global-sn">{{item.sn}}</div>

				</div>
				<!-- 商品信息 -->
				<div class="flex goods-item">
					<div>
						<u-image width="150" height="150" :src="item.thumbnail" mode="" />
					</div>
					<div class="wes-2 goods-name">{{item.goodsName}} {{item.sellingPoint}}</div>
				</div>
			</div>

		</div>
		<u-empty text="暂无更多商品" v-else mode="order"></u-empty>

	</div>
</template>

<script>
	import storage from "@/utils/storage.js"; //缓存
	import {
		getDraftGoodsListData
	} from "@/api/goods";
	export default {

		data() {
			return {
				searchForm: {},
				params: {
					saveType: "TEMPLATE",
					sort: "create_time",
					order: "desc",
					pageSize: 10,
					pageNumber: 1,
				},
				goodsTemplates: [], //商品列表
				selectedGoods: "", // 子级给父级传的商品
				routerVal: '', // src内容

			};
		},
		onShow() {
			this.init();
		},
		watch: {

		},
		//   触底
		onReachBottom() {
			this.params.pageNumber++;
			this.init();
		},
		methods: {
			// 选择商品回调
			confirm(val) {
				console.log(val)
				uni.$emit('selectedGoodsTemplate', val);
				uni.navigateBack()
			},
			async init() {
				getDraftGoodsListData(this.params).then((res) => {
					if (res.data.success) {
						this.goodsTemplates.push(...res.data.result.records)
						this.templateTotal = res.data.result.total
					}
				});
			},
		},

		load() {
			this.params.pageNumber = 1;
			this.goodsTemplates = [];
			this.init();
		},


	};
</script>

<style lang="scss" scoped>
	@import "@/components/global.scss";

	.goods-follow-price {
		>div {
			margin: 5rpx 0;

			>span {
				font-weight: bold;
				color: $main-color;
				font-size: 30rpx;
			}
		}
	}

	.select-btn {
		width: 300rpx;
		height: 75rpx;
		background: #333;
		position: fixed;
		left: 50%;
		margin-left: -150rpx;
		bottom: 40rpx;
		color: #fff;
		text-align: center;
		line-height: 75rpx;
		border-radius: 30rpx;
	}
</style>
